<template>
	<Popup v-if="showPopup" @confirm="onSubmit" :hasCancel="false">
		<view class="tips">请填写个人信息，以便回访</view>
		<view class="info-item">
			<input type="text" placeholder="姓名" v-model="name" />
		</view>
		<view class="info-item">
			<input type="number" placeholder="年龄" v-model="age" />
		</view>
		<view class="info-item">
			<input type="number" placeholder="电话" maxlength="11" v-model="tel" />
		</view>
	</Popup>
</template>

<script>
	import { mapState } from 'vuex'
	import { isMobile } from '../../utils/utils.js'
	import Popup from '../popup/popup.vue'
	export default {
		name:"info-dialog",
		
		components: {
			Popup
		},
		
		data() {
			return {
				name: '',
				age: '',
				tel: '',
				sending: false,
			};
		},
		
		computed: {
			...mapState({
				showPopup: state => state.index.needSetInfo
			})
		},
		
		methods: {
			async onSubmit() {
				if(this.verify() && !this.sending) {
					this.sending = true
					let res = await this.$store.dispatch('index/needSetInfo')
					console.log(res)
				}
			},
			
			verify() {
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						duration: 3000,
						icon: 'none'
					})
					return false
				}
				if (!this.age) {
					uni.showToast({
						title: '请输入年龄',
						duration: 3000,
						icon: 'none'
					})
					return false
				}
				if (!this.tel) {
					uni.showToast({
						title: '请输入电话',
						duration: 3000,
						icon: 'none'
					})
					return false
				} else if (!isMobile(this.tel)) {
					uni.showToast({
						title: '请输入真实有效的电话',
						duration: 3000,
						icon: 'none'
					})
				}
				return true
			}
		}
		
	}
</script>

<style lang="scss">
.tips {
	color: #7e7e7e;
	font-size: 30rpx;
	width: 480rpx;
	margin-bottom: 30rpx;
}

.info-item {
	margin-bottom: 20rpx;
	width: 480rpx;
	
	input {
		background-color: #e4e4e4;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
	}
}

</style>
